<template>
  <view>
    <!-- gc_school/pages/rule/index.wxml -->
  
    <canvas v-if="!path"  :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="storePoster"  ></canvas>
   
    <image
      class="haibao"
      :src="path"
      mode="widthFix"
      @click="fd(path)"
    />

  </view>
</template>

<script>
// gc_school/pages/rule/index.js
var app = getApp();
export default {
  data() {
    return {
      data: {},
      article_fee_content: '',
      canvasW: 0, // 画布宽
      canvasH: 0, // 画布高
      SystemInfo: {}, // 设备信息
      ewmW: 120, // 二维码大小
      Oldprice: '350.00', // 原价
      name: '天涯过客', // 推荐人
      path:""
    };
  },
   props: {
      title:{
        type:String,
        default: '韶山村湖南土菜馆-南飞鸿店2南飞鸿店南飞鸿店'
      }, // 商品标题
      price: {
        type: String,
        default: '158.00'
      } , // 价格
      address: {
        type: String,
        default: "河南省商丘市梁园区平台商丘学院224号"
      } ,
      mainImg: {
        type: String,
        default: 'https://image.mync.xyz/subschool/202203/202203281218300270007.png'
      },
      qrcode:{
         type: String,
          default: 'https://test.fkynet.net/store/1683788875mp128.png'
      }
  },
    /**
     * 生命周期函数--监听页面加载
     */
  created: function (options) {
    var that = this;
   
    this.poster() 
  },
  methods: {
    async poster() {
      // 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
      this.SystemInfo = await this.getSystemInfo();
      // 获取商品主图，二维码信息，APP端会返回图片的本地路径（H5端只能返回原路径）
      this.goodsImg = await this.getImageInfo(this.mainImg);
      this.ewmImg = await this.getImageInfo(this.qrcode);
      this.canvasW = this.SystemInfo.windowWidth-25; // 画布宽度
      this.canvasH = this.goodsImg.height + this.ewmW + 50;  // 画布高度 = 主图高度+二维码高度 + 文字图片的间距（大概50）
      this.canvasW = 345; // 画布宽度
      this.canvasH = 480;  // 画布高度 = 主图高度+二维码高度 + 文字图片的间距（大概50）

      // 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
      if (this.goodsImg.errMsg == 'getImageInfo:ok' && this.ewmImg.errMsg == 'getImageInfo:ok' && this.SystemInfo.errMsg == 'getSystemInfo:ok') {
        console.log('ok')
        uni.showToast({
          icon: 'loading',
          mask: true,
          duration: 10000,
          title: '海报生成中',
        });
        setTimeout(() => {
          var ctx = uni.createCanvasContext('storePoster', this);
          // 填充背景色，白色
          ctx.setFillStyle('#fff'); // 默认白色
          ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)

          // 绘制商品主图，二维码
          ctx.drawImage(this.goodsImg.path, 0, 0, this.canvasW, this.canvasW) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
          ctx.drawImage(this.ewmImg.path, this.canvasW - 130, this.canvasW + 10, this.ewmW, this.ewmW) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)

          // 3、绘制商品标题，多余文字自动换行
          ctx.setFontSize(16); // setFontSize() 设置字体字号
          ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色

          /* str 这段代码是我百度找的，参考别人的。canvas不能自动换行，需要自行计算 */
          let _strlineW = 0;
          let _strLastIndex = 0; //每次开始截取的字符串的索引
          let _strHeight = this.canvasW + 30; //绘制字体距离canvas顶部的初始高度
          let _num = 1;
          for (let i = 0; i < this.title.length; i++) {
            _strlineW += ctx.measureText(this.title[i]).width;
            if (_strlineW > this.canvasW - 155) {
              if (_num == 2 && 2) {
                //文字换行数量大于二进行省略号处理
                ctx.fillText(this.title.substring(_strLastIndex, i - 5) + '...', 10, _strHeight);
                _strlineW = 0;
                _strLastIndex = i;
                _num++;
                break;
              } else {
                ctx.fillText(this.title.substring(_strLastIndex, i), 10, _strHeight);
                _strlineW = 0;
                _strHeight += 20;
                _strLastIndex = i;
                _num++;
              }
            } else if (i == this.title.length - 1) {
              ctx.fillText(this.title.substring(_strLastIndex, i + 1), 10, _strHeight);
              _strlineW = 0;
            }
          }
          /* end */

          //4、商品价格
          ctx.setFontSize(12) // 字号
          ctx.setFillStyle('#b8b8b8') // 颜色
          ctx.fillText(this.address, 10, this.canvasW + 75); // （文字，x，y）
          ctx.setFontSize(12)
          ctx.setFillStyle('#b8b8b8')
          ctx.fillText('起送费：'+this.price, 10, this.canvasW + 95);

          // 5、邀请信息
          // ctx.setFontSize(16)
          // ctx.setFillStyle('#333')
          // ctx.fillText(this.name+'推荐给你', 10, this.canvasW +100);

          ctx.setFontSize(14)
          ctx.setFillStyle('#b8b8b8')
          ctx.fillText('长按或扫描识别二维码', 8, this.canvasW + this.ewmW);


          ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
            console.log(ret)
            uni.showToast({
              icon: 'success',
              mask: true,
              title: '生成成功',
            });
            // uni.canvasPutImageData({ 
            uni.canvasToTempFilePath({ // 保存canvas为图片
              canvasId: 'storePoster',
              quality: 1,
              complete:  (res)=> {
                // 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
                console.log(res)
                this.path= res.tempFilePath
              },
            },this)
          });
        }, 1500)
      } else {
        console.log('err')
      }
    },
    // 获取图片信息
    getImageInfo(image) {
      return new Promise((req, rej) => {
        uni.getImageInfo({
          src: image,
          success: function (res) {
            req(res)
          },
        });
      })
    },

    // 获取设备信息
    getSystemInfo() {
      return new Promise((req, rej) => {
        uni.getSystemInfo({
          success: function (res) {
            req(res)
          }
        });
      })
    },

    saveCanvas() { //保存图片到本地
      let _this = this;
      uni.canvasToTempFilePath({ // 保存canvas为图片
        canvasId: 'storePoster',
        quality: 1,
        complete: function (res) {
          console.log(res);
          uni.saveImageToPhotosAlbum({
            filePath:_this.path,
            success: function () {
              console.log('save success');
              uni.showToast({
                title: '图片保存成功'
              })
              setTimeout(() => {
                _this.$parent.close()
                _this.showCanvas = false;
              }, 1000);
            },
            fail(err) {
              console.log(err);
               _this.tips.tips("您拒绝了图片保存权限")
              setTimeout(() => {

                console.log(_this);
                // _this.$parent.close()
                _this.showCanvas = false;
              }, 1000);
            }
          });
        },
        success:(res)=>{console.log(res); },
        fail: (res) => { console.log(res);}
      },this)

    },

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
};
</script>
<style>
/* gc_school/pages/rule/index.wxss */
page {
  background-color: white;
}

.bgmains {
  background-color: #ff6444;
  color: white;
}

.cuIcon-back {
  color: white;
}

.box {
  padding: 20rpx 30rpx;
}
/* canvas{
  opacity: 0;
  position: absolute;
  top: -1000000px;
  left:-1000000px;
} */
.haibao{
  width: 690rpx;
}
</style>
